<template>
  <div class="container">
    <img class="bg" :src="wallpaper" alt="">
    <div class="user">
      <a href="javascript"><img :src="user_logo" alt=""></a>
      <h3>{{name}}</h3>
      <span>{{signature}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['id'],
    data () {
      return {
        user_logo: '//tvax3.sinaimg.cn/crop.0.0.512.512.50/006quK43ly8fjgv9prtf1j30e80e83z6.jpg',
        name: '爱笑的人运气不会太差',
        wallpaper: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506063505463&di=0ec510372a6e468b605a29b5c5c765e6&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F782cabc158c57d9e198e025060991146c5bb482c.jpg',
        signature: 'I am wating,only to meet with you'
      }
    }
  }

</script>
<style scoped>
  .container {
    background: blue;
    width: 100%;
    height: 300px;
  }

  .container .bg {
    width: 100%;
    height: 100%;
  }

  .user {
    margin-top: -260px;
    color: #ffffff;
  }

  .user img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
  }

  .user img:active, .user img:hover {
    box-shadow: 0 0 10px 3px rgba(255, 87, 53, 0.64);
  }

</style>
